<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="showTel">查看联系方式</button>
    <!-- 写两个按钮，一个为修改名字，一个为修改年龄 -->
     <button @click="changeName">修改名字</button>
     <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script lang ="ts">
    export default {
        name: 'Person',
        data() {
            return {
                name: '张三',
                age: 18,
                tel: '1234567890',
            }
        },
        methods:{
            showTel() {
                alert(this.tel)
            },
            changeAge() {
                this.age += 1 
            },
            changeName() {
                this.name = 'zhangsan'
            }
        }
    }
</script>

<style scoped>
.person {
    /* 背景颜色 */
    background-color: skyblue;
    /* 阴影 */
    box-shadow: 0 0px 10px;
    /* 圆角 */
    border-radius: 4px;
    padding: 20px; /* 内边距 */
}
button { 
    margin: 0 5px;
}
</style>


